<!--
 * @Author: xx
 * @Date: 2021-06-11 10:43:47
 * @Description: 对应处方
 * @FilePath: \client-app\src\views\drug\components\create-drug-prescription.vue
-->

<template>
  <Popup
    v-model:visible="popupVisible"
    :drag-enabled="false"
    :close-on-outside-click="false"
    :show-close-button="true"
    :show-title="true"
    :width="500"
    :height="280"
    :max-height="'95vh'"
    @hidden="hidden"
    title="对应诊疗处方单据"
    @isReady="isReady"
    ref="popup"
    :showRefresh="false"
    style="font-size: 20px"
  >
    <DxForm>
      <DxGroupItem>
        <DxSimpleItem>
          <DxLabel text="应用范围 " />
          <DxSelectBox disabled="true" read-only="true" placeholder=""> </DxSelectBox>
        </DxSimpleItem>
        <DxSimpleItem>
         <div class="align-center">
                <DxCheckBox
                  :width="100"
                  text="门诊采用"
                />
                <DxSelectBox
                  style="flex: 1"
                  placeholder="请选择（单据类型）"
                />
              </div>
        </DxSimpleItem>
        <DxSimpleItem>
          <div class="align-center">
                <DxCheckBox
                  :width="100"
                  text="住院采用"
                />
                <DxSelectBox
                  style="flex: 1"
                  placeholder="请选择（单据类型）"
                />
              </div>
        </DxSimpleItem>
      </DxGroupItem>
    </DxForm>
    <div class="lb-form-button-right">
      <DxButton
        text="取消"
        styling-mode="text"
        type="default"
        @click="hidden()"
      />

      <DxButton
        text="保存"
        styling-mode="text"
        type="default"
        @click="save()"
      />
      </div>
  </Popup>
</template>

<script lang="ts">
import {
  DxForm,
  DxSimpleItem,
  DxGroupItem,
  DxRequiredRule,
  DxLabel,
} from "devextreme-vue/form";
import Popup from "@/framework/components/popup/popup.vue";
import { Vue, Options, Prop, Watch, Emit } from "vue-property-decorator";
import DxButton from "devextreme-vue/button";
import { dxSelectBoxOptions } from "devextreme/ui/select_box";
import { DxSelectBox } from "devextreme-vue/select-box";
import DxCheckBox from "devextreme-vue/check-box";
import { dxScrollViewOptions } from "devextreme/ui/scroll_view";
@Options({
  components: {
    Popup,
    DxButton,
    DxSelectBox,
    DxCheckBox,
    DxForm,
    DxSimpleItem,
    DxGroupItem,
    DxRequiredRule,
    DxLabel,
  },
})
export default class CreateDrugPrescription extends Vue {
  @Prop({ type: Boolean, default: false })
  value!: boolean;
  @Emit("update:value")
  updateValue(e) {}

  get popupVisible() {
    return this.value;
  }
  set popupVisible(value) {
    this.updateValue(value);
  }
  hidden() {
    this.popupVisible = false;
  }
  options: dxSelectBoxOptions = {
    width: "100px",
    items: [
      {
        id: 666,
        name: "666",
      },
    ],
    displayValue: "",
  };
  tagSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    displayExpr: "displayValue",
    valueExpr: "dictionaryId",
    searchEnabled: true,
    searchExpr: "displayValue",
    showDropDownButton: true,
  };
  durgSetting: dxSelectBoxOptions = {
    stylingMode: "outlined",
    displayExpr: "drugName",
    valueExpr: "drugId",
    searchEnabled: true,
    searchExpr: "name",
    showDropDownButton: true,
  };
}
</script>

<style lang="scss" scoped>
.check {
  position: absolute;
  left: -90px;
}
.right-top {
  position: absolute;
  right: 60px;
  top: 14px;
}
.btn {
  position: absolute;
  bottom: -18px;
  right: 20px;
}
</style>